<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-page-header__content{
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <el-page-header style="background-color: #0095d7;color: white;line-height: 60px" content="添加俱乐部信息" @back="goBack"></el-page-header>
    <el-card style="width: 600px;height: 700px;margin: 0 auto">
        <el-form label-width="80px">

            <el-form-item label="名称">
                <el-input v-model="p.name" type="text"></el-input>
            </el-form-item>

            <el-form-item label="负责人">
                <el-input v-model="p.person" type="text"></el-input>
            </el-form-item>

<!--            <el-form-item label="创建时间">-->
<!--                <template>-->
<!--                    <div class="block">-->
<!--                        <span class="demonstration"></span>-->
<!--                        <el-date-picker-->
<!--                                v-model="p.time"-->
<!--                                type="datetime"-->
<!--                                placeholder="选择日期时间">-->
<!--                        </el-date-picker>-->
<!--                    </div>-->
<!--                </template>-->
<!--            </el-form-item>-->

            <el-form-item label="类型">
                <el-select v-model="p.type">
                    <!--遍历所有分类信息并展示在下拉选中-->
                    <el-option v-for="c in typeArr"
                               :label="c.name" :value="c.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="活动次数">
                <el-input v-model="p.count" type="text"></el-input>
            </el-form-item>

            <el-form-item label="会员人数">
                <el-input v-model="p.vip" type="text"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="insertClub()">确认添加</el-button>
            </el-form-item>

        </el-form>
    </el-card>

</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                p:{name:"",person:"",
                    type:"",count:"",vip:""},
                typeArr:[]
            }
        },
        created:function () {
            //发请求获取所有分类信息
            axios.get("/type/select").then(function (response) {
                v.typeArr = response.data;
            })
        },
        methods: {
            handleSuccess(response,file,fileList){
                v.p.url = response;
            },
            insertClub(){
                //发出添加商品的请求
                axios.post("/club/insert",v.p).then(function () {
                    location.href="/admin.html";
                })
            },
            goBack(){
                //返回上一页面
                history.back();
            }
        }
    })
</script>
</html>